// packageAPI/pages/canvas/canvas.js
Page({
  data: {
    result: '等待测试...',
    resultStr: '',
    formData: {},
    schema: [],
    title: '画布API',
    zh: 'Canvas 2D API 测试',
    weburl: '',
    apiName: '',
    canvas: null,
    ctx: null,
    animationId: null,
    routeData: {} // 添加路由数据存储
  },

  onLoad(options) {
    console.log('Canvas页面加载');
    console.log('路由传递的参数:', options);
    
    // 获取从newAPI页面传递的参数并赋值
    if (options) {
      const routeData = {
        zh: options.zh || null,           
        title: options.title || null,       
        remark: options.remark || null,  
        webUrl: options.webUrl || null    
      };
      
      
      this.setData({
        routeData: routeData,
        title: routeData.title || '画布API',       
        zh: routeData.zh || 'Canvas 2D API 测试',  
        weburl: routeData.webUrl || '',             
        resultStr: this.formatResult({
          status: '页面加载完成',
          apiName: routeData.zh,
          pageTitle: routeData.title,
          docUrl: routeData.webUrl,
          remark: routeData.remark,
          note: '路由参数已解析并应用到页面标题和文档链接'
        })
      });
      
      // 根据API名称调整页面行为
      if (routeData.zh === 'wx.createOffscreenCanvas') {
        console.log('检测到离屏Canvas API，将重点展示相关功能');
      } else if (routeData.zh === 'wx.createCanvasContext') {
        console.log('检测到CanvasContext API');
      }
    } else {
      this.setData({
        routeData: {},
        title: '画布API',                           
        zh: 'Canvas 2D API 测试',                  
        weburl: '',                              
        result: '页面加载完成',
        resultStr: this.formatResult({
          status: '页面加载完成',
          note: '没有检测到路由参数'
        })
      });
    }
  },

  onReady() {
    setTimeout(() => {
      this.initCanvas();
    }, 1000);
  },

  // API处理函数
  handleApiCall: function(e) {
    const apiName = e.currentTarget.dataset.apiname;
    
    this.setData({
      apiName: apiName
    });
    
    switch(apiName) {
      case 'wx.createOffscreenCanvas':
        this.createOffscreenCanvasFunc();
        break;
      case 'wx.canvasToTempFilePath':
        this.canvasToTempFilePathFunc();
        break;
      case 'CanvasContext.putImageData':
        this.canvasPutImageDataFunc();
        break;
      case 'CanvasContext.getImageData':
        this.canvasGetImageDataFunc();
        break;
      case 'Canvas.getContext':
        this.testGetContextFunc();
        break;
      case 'Canvas.requestAnimationFrame':
        this.testRequestAnimationFrameFunc();
        break;
      case 'Canvas.cancelAnimationFrame':
        this.testCancelAnimationFrameFunc();
        break;
      case 'Canvas.createImage':
        this.testCreateImageFunc();
        break;
      case 'Canvas.createImageData':
        this.testCreateImageDataFunc();
        break;
      case 'Canvas.createPath2D':
        this.testCreatePath2DFunc();
        break;
      case 'Canvas.toDataURL':
        this.testToDataURLFunc();
        break;
      case 'Path2D.addPath':
        this.testPath2DAddPathFunc();
        break;
      case 'Path2D.arc':
        this.testPath2DArcFunc();
        break;
      case 'Path2D.arcTo':
        this.testPath2DArcToFunc();
        break;
      case 'Path2D.bezierCurveTo':
        this.testPath2DBezierCurveToFunc();
        break;
      case 'Path2D.closePath':
        this.testPath2DClosePathFunc();
        break;
      case 'Path2D.ellipse':
        this.testPath2DEllipseFunc();
        break;
      case 'Path2D.lineTo':
        this.testPath2DLineToFunc();
        break;
      case 'Path2D.moveTo':
        this.testPath2DMoveToFunc();
        break;
      case 'Path2D.quadraticCurveTo':
        this.testPath2DQuadraticCurveToFunc();
        break;
      case 'Path2D.rect':
        this.testPath2DRectFunc();
        break;
      case 'Canvas.init':
        this.forceInitCanvasFunc();
        break;
      case 'Canvas.test':
        this.testSimpleCanvasFunc();
        break;
      case 'Canvas.clear':
        this.clearCanvasFunc();
        break;
      default:
        this.showResult(`未知的API: ${apiName}`);
    }
  },

  initCanvas() {
    try {
      const query = wx.createSelectorQuery().in(this);
      query.select('#myCanvas')
        .fields({ node: true, size: true })
        .exec((res) => {
          console.log('Canvas查询结果:', res);
          if (res && res[0] && res[0].node) {
            console.log('Canvas节点获取成功');
            this.setupCanvas(res[0]);
          } else {
            console.error('Canvas节点获取失败:', res);
            this.setData({
              result: 'Canvas节点获取失败',
              resultStr: this.formatResult({
                error: 'Canvas节点获取失败',
                result: res,
                note: '请检查Canvas组件是否正确渲染'
              }, false)
            });
            
            setTimeout(() => {
              this.initCanvas();
            }, 1000);
          }
        });
    } catch (error) {
      this.setData({
        result: `Canvas初始化失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },
  setupCanvas(canvasInfo) {
    try {
      const canvas = canvasInfo.node;
      
      if (!canvas) {
        throw new Error('Canvas节点为空');
      }
      
      const ctx = canvas.getContext('2d');
      
      if (!ctx) {
        throw new Error('2D上下文获取失败');
      }
      
      canvas.width = 300;
      canvas.height = 300;
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      
      this.setData({
        canvas: canvas,
        ctx: ctx,
        result: 'Canvas 2D初始化成功',
        resultStr: this.formatResult({
          status: 'Canvas 2D初始化成功',
          size: '300x300',
          canvasType: 'Canvas 2D API',
          timestamp: new Date().toLocaleTimeString()
        })
      });
      
      console.log('延迟执行简单Canvas测试...');
      setTimeout(() => {
        this.testSimpleCanvas();
      }, 500);
      
    } catch (error) {
      console.error('Canvas设置失败:', error);
      this.setData({
        result: `Canvas设置失败: ${error.message}`,
        resultStr: this.formatResult({
          error: error.message,
          canvasInfo: canvasInfo,
          note: '请检查Canvas 2D API支持'
        }, false)
      });
    }
  },

  getFormData(e) {
    this.setData({
      formData: e.detail
    });
  },
  formatResult(data, isSuccess = true) {
    const status = isSuccess ? '成功' : '失败';
    const color = isSuccess ? '#34c759' : '#ff3b30';
    let html = `<div style="color: ${color}; font-weight: bold;">${status}</div>`;
    
    if (typeof data === 'object') {
      html += '<div style="background: #f5f5f5; padding: 8px; border-radius: 4px; margin-top: 5px; font-size: 12px;">';
      html += JSON.stringify(data, null, 2).replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
      html += '</div>';
    } else {
      html += `<div style="margin-top: 5px;">${data}</div>`;
    }
    return html;
  },
  compareVersion(v1, v2) {
    const v1parts = v1.split('.').map(Number);
    const v2parts = v2.split('.').map(Number);
    const maxLength = Math.max(v1parts.length, v2parts.length);
    
    for (let i = 0; i < maxLength; i++) {
      const v1part = v1parts[i] || 0;
      const v2part = v2parts[i] || 0;
      
      if (v1part > v2part) return 1;
      if (v1part < v2part) return -1;
    }
    return 0;
  },

  forceInitCanvas() {
    console.log('强制初始化Canvas...');
    this.setData({
      result: '正在强制初始化Canvas...',
      resultStr: this.formatResult('正在强制初始化Canvas...')
    });
    this.initCanvas();
  },

  testSimpleCanvas() {
    if (!this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const ctx = this.data.ctx;
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.clearRect(0, 0, 300, 300);
      
      ctx.fillStyle = '#f0f0f0';
      ctx.fillRect(0, 0, 300, 300);
      
      ctx.fillStyle = '#333333';
      ctx.font = 'bold 16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Canvas 2D API 测试', 150, 30);
      
      ctx.fillStyle = '#ff0000';
      ctx.fillRect(50, 50, 60, 40);
      
      ctx.fillStyle = '#0000ff';
      ctx.beginPath();
      ctx.arc(200, 70, 30, 0, 2 * Math.PI);
      ctx.fill();
      
      ctx.strokeStyle = '#00ff00';
      ctx.lineWidth = 3;
      ctx.beginPath();
      ctx.moveTo(50, 120);
      ctx.lineTo(250, 120);
      ctx.stroke();
      
      ctx.fillStyle = '#800080';
      ctx.font = '14px Arial';
      ctx.textAlign = 'left';
      ctx.fillText('矩形、圆形、线条演示', 50, 140);
      
      const gradient = ctx.createLinearGradient(50, 170, 250, 170);
      gradient.addColorStop(0, '#ff0000');
      gradient.addColorStop(0.5, '#ffff00');
      gradient.addColorStop(1, '#0000ff');
      ctx.fillStyle = gradient;
      ctx.fillRect(50, 170, 200, 30);
      
      ctx.strokeStyle = '#000000';
      ctx.lineWidth = 2;
      ctx.strokeRect(10, 10, 280, 280);
      
      this.setData({
        result: '简单Canvas测试完成',
        resultStr: this.formatResult('简单Canvas测试完成，绘制了各种图形')
      });
    } catch (error) {
      this.setData({
        result: `测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  clearCanvas() {
    if (!this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      this.data.ctx.clearRect(0, 0, 300, 300);
      this.setData({
        result: '画布已清空',
        resultStr: this.formatResult('画布已清空')
      });
    } catch (error) {
      this.setData({
        result: `清空失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },


  testGetContext() {
    if (!this.data.canvas) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化，请等待初始化完成', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx2d = canvas.getContext('2d');
      
      if (!ctx2d) {
        throw new Error('Canvas 2D Context获取失败');
      }
      
      ctx2d.clearRect(0, 0, 300, 300);
      
      ctx2d.fillStyle = '#f5f5dc';
      ctx2d.fillRect(0, 0, 300, 300);
      
      ctx2d.fillStyle = '#8b4513';
      ctx2d.font = 'bold 16px Arial';
      ctx2d.textAlign = 'center';
      ctx2d.fillText('Canvas 2D getContext 演示', 150, 30);
      
      ctx2d.fillStyle = '#333';
      ctx2d.font = '14px Arial';
      ctx2d.textAlign = 'left';
      ctx2d.fillText('Context 类型: Canvas 2D', 50, 80);
      ctx2d.fillText('Canvas 尺寸: 300x300', 50, 100);
      ctx2d.fillText('状态: 获取成功', 50, 120);
      
      ctx2d.fillStyle = '#ff6b6b';
      ctx2d.fillRect(50, 140, 60, 40);
      
      ctx2d.fillStyle = '#4ecdc4';
      ctx2d.beginPath();
      ctx2d.arc(200, 160, 25, 0, 2 * Math.PI);
      ctx2d.fill();
      
      ctx2d.strokeStyle = '#45b7d1';
      ctx2d.lineWidth = 3;
      ctx2d.beginPath();
      ctx2d.moveTo(50, 200);
      ctx2d.lineTo(250, 200);
      ctx2d.stroke();
      
      ctx2d.fillStyle = '#666';
      ctx2d.font = '12px Arial';
      ctx2d.textAlign = 'center';
      ctx2d.fillText('Canvas 2D Context 获取成功，可正常绘制', 150, 240);
      
      this.setData({
        result: 'Canvas 2D getContext测试成功',
        resultStr: this.formatResult({
          status: 'Canvas 2D getContext方法测试成功',
          contextType: 'Canvas 2D',
          canvasSize: '300x300',
          note: 'Canvas 2D Context获取成功并可正常使用'
        })
      });
    } catch (error) {
      console.error('getContext测试失败:', error);
      this.setData({
        result: `getContext测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  testRequestAnimationFrame() {
    if (!this.data.ctx || !this.data.canvas) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    if (this.data.animationId) {
      this.data.canvas.cancelAnimationFrame(this.data.animationId);
    }

    try {
      const ctx = this.data.ctx;
      const canvas = this.data.canvas;
      let angle = 0;
      let frameCount = 0;
      const maxFrames = 120; 
      
      const animate = () => {
        ctx.clearRect(0, 0, 300, 300);
        
        ctx.fillStyle = '#f0f0f0';
        ctx.fillRect(0, 0, 300, 300);
        
        ctx.fillStyle = '#333';
        ctx.font = 'bold 16px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('Canvas 2D requestAnimationFrame 演示', 150, 30);
        
        ctx.save();
        ctx.translate(150, 120);
        ctx.rotate(angle);
        
        const hue = (angle * 180 / Math.PI) % 360;
        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
        ctx.fillRect(-25, -25, 50, 50);
        
        ctx.fillStyle = '#fff';
        ctx.beginPath();
        ctx.arc(0, 0, 5, 0, 2 * Math.PI);
        ctx.fill();
        
        ctx.restore();
        
        const progress = frameCount / maxFrames;
        ctx.fillStyle = '#ddd';
        ctx.fillRect(50, 180, 200, 10);
        ctx.fillStyle = '#007aff';
        ctx.fillRect(50, 180, 200 * progress, 10);
        
        ctx.fillStyle = '#666';
        ctx.font = '12px Arial';
        ctx.fillText(`帧数: ${frameCount}/${maxFrames}`, 150, 210);
        ctx.fillText(`角度: ${Math.round(angle * 180 / Math.PI)}°`, 150, 225);
        ctx.fillText(`颜色: HSL(${Math.round(hue)}, 70%, 50%)`, 150, 240);
        
        angle += 0.1;
        frameCount++;
        
        if (frameCount < maxFrames) {
          this.data.animationId = canvas.requestAnimationFrame(animate);
        } else {
          this.setData({
            result: 'requestAnimationFrame动画完成',
            resultStr: this.formatResult({
              status: 'requestAnimationFrame测试成功',
              totalFrames: maxFrames,
              duration: '2秒',
              fps: '60fps'
            })
          });
          this.data.animationId = null;
        }
      };
      
      this.data.animationId = canvas.requestAnimationFrame(animate);
      
      this.setData({
        result: 'requestAnimationFrame动画开始',
        resultStr: this.formatResult({
          status: 'requestAnimationFrame动画已开始',
          duration: '2秒'
        })
      });
    } catch (error) {
      this.setData({
        result: `requestAnimationFrame测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  testCancelAnimationFrame() {
    if (!this.data.canvas) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      if (this.data.animationId) {
        this.data.canvas.cancelAnimationFrame(this.data.animationId);
        this.data.animationId = null;
        
        this.setData({
          result: 'cancelAnimationFrame成功',
          resultStr: this.formatResult({
            status: 'cancelAnimationFrame执行成功',
            note: '当前动画已取消'
          })
        });
      } else {
        const ctx = this.data.ctx;
        const canvas = this.data.canvas;
        
        let frameCount = 0;
        const animate = () => {
          ctx.clearRect(0, 0, 300, 300);
          
          ctx.fillStyle = '#f8f9fa';
          ctx.fillRect(0, 0, 300, 300);
          
          ctx.fillStyle = '#333';
          ctx.font = 'bold 16px Arial';
          ctx.textAlign = 'center';
          ctx.fillText('cancelAnimationFrame 演示', 150, 30);
          
          const opacity = Math.sin(frameCount * 0.3) * 0.5 + 0.5;
          ctx.fillStyle = `rgba(255, 59, 48, ${opacity})`;
          ctx.beginPath();
          ctx.arc(150, 120, 30, 0, 2 * Math.PI);
          ctx.fill();
          
          ctx.fillStyle = '#666';
          ctx.font = '12px Arial';
          ctx.fillText('动画运行中...', 150, 170);
          ctx.fillText(`帧数: ${frameCount}`, 150, 185);
          ctx.fillText('1秒后自动取消', 150, 200);
          
          frameCount++;
          
          if (frameCount < 60) {
            this.data.animationId = canvas.requestAnimationFrame(animate);
          } else {
            canvas.cancelAnimationFrame(this.data.animationId);
            this.data.animationId = null;
            
            ctx.clearRect(0, 0, 300, 300);
            ctx.fillStyle = '#f8f9fa';
            ctx.fillRect(0, 0, 300, 300);
            
            ctx.fillStyle = '#333';
            ctx.font = 'bold 16px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('cancelAnimationFrame 演示', 150, 30);
            
            ctx.fillStyle = '#34c759';
            ctx.beginPath();
            ctx.arc(150, 120, 30, 0, 2 * Math.PI);
            ctx.fill();
            
            ctx.fillStyle = '#fff';
            ctx.font = '18px Arial';
            ctx.fillText('✓', 150, 125);
            
            ctx.fillStyle = '#666';
            ctx.font = '12px Arial';
            ctx.fillText('动画已取消', 150, 170);
            
            this.setData({
              result: 'cancelAnimationFrame演示完成',
              resultStr: this.formatResult({
                status: 'cancelAnimationFrame测试成功',
                totalFrames: frameCount
              })
            });
          }
        };
        
        this.data.animationId = canvas.requestAnimationFrame(animate);
        
        this.setData({
          result: 'cancelAnimationFrame演示开始',
          resultStr: this.formatResult('动画已开始，将在1秒后自动取消')
        });
      }
    } catch (error) {
      this.setData({
        result: `cancelAnimationFrame测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  testCreateImage() {
    if (!this.data.canvas) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      const img = canvas.createImage();
      
      img.onload = () => {
        try {
          ctx.clearRect(0, 0, 300, 300);
          
          ctx.fillStyle = '#f0f8ff';
          ctx.fillRect(0, 0, 300, 300);
          
          // 绘制标题
          ctx.fillStyle = '#333';
          ctx.font = 'bold 16px Arial';
          ctx.textAlign = 'center';
          ctx.fillText('Canvas 2D createImage 演示', 150, 30);
          
          // 绘制图片
          ctx.drawImage(img, 100, 60, 100, 100);
          
          // 显示图片信息
          ctx.fillStyle = '#666';
          ctx.font = '12px Arial';
          ctx.fillText(`图片尺寸: ${img.width}x${img.height}`, 150, 180);
          ctx.fillText('图片加载并绘制成功', 150, 200);
          
          this.setData({
            result: 'createImage测试成功',
            resultStr: this.formatResult({
              status: 'createImage方法测试成功',
              imageSize: `${img.width}x${img.height}`,
              note: '图片对象创建成功并正常显示'
            })
          });
        } catch (error) {
          this.setData({
            result: `图片绘制失败: ${error.message}`,
            resultStr: this.formatResult(error.message, false)
          });
        }
      };
      
      img.onerror = () => {
        ctx.clearRect(0, 0, 300, 300);
        ctx.fillStyle = '#f0f8ff';
        ctx.fillRect(0, 0, 300, 300);
        
        ctx.fillStyle = '#333';
        ctx.font = 'bold 16px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('Canvas 2D createImage 演示', 150, 30);
        
        // 绘制一个替代的图标
        ctx.fillStyle = '#ddd';
        ctx.fillRect(100, 60, 100, 100);
        ctx.fillStyle = '#999';
        ctx.font = '20px Arial';
        ctx.fillText('图片', 150, 115);
        
        ctx.fillStyle = '#666';
        ctx.font = '12px Arial';
        ctx.fillText('图片对象创建成功', 150, 180);
        ctx.fillText('使用默认占位图', 150, 200);
        
        this.setData({
          result: 'createImage测试成功(默认图)',
          resultStr: this.formatResult({
            status: 'createImage方法测试成功',
            note: '图片对象创建成功，使用默认占位图'
          })
        });
      };
      
      // 设置一个简单的SVG图片数据
      img.src = '';
      
    } catch (error) {
      this.setData({
        result: `createImage测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // createImageData - 创建像素数据
  testCreateImageData() {
    if (!this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const ctx = this.data.ctx;
      
      // 清空画布
      ctx.clearRect(0, 0, 300, 300);
      
      // 绘制背景
      ctx.fillStyle = '#f8f9fa';
      ctx.fillRect(0, 0, 300, 300);
      
      // 绘制标题
      ctx.fillStyle = '#333';
      ctx.font = 'bold 16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Canvas 2D createImageData 演示', 150, 30);
      
      // 创建空白的ImageData对象
      const imageData1 = ctx.createImageData(80, 80);
      
      // 创建另一个ImageData对象并填充数据
      const imageData2 = ctx.createImageData(80, 80);
      const data2 = imageData2.data;
      
      // 为第二个图像填充棋盘效果
      for (let i = 0; i < data2.length; i += 4) {
        const pixelIndex = i / 4;
        const x = pixelIndex % 80;
        const y = Math.floor(pixelIndex / 80);
        const isBlack = (Math.floor(x / 10) + Math.floor(y / 10)) % 2 === 0;
        
        data2[i] = isBlack ? 0 : 255;     // R
        data2[i + 1] = isBlack ? 0 : 255; // G  
        data2[i + 2] = isBlack ? 0 : 255; // B
        data2[i + 3] = 255;               // A
      }
      
      // 绘制空白ImageData
      ctx.putImageData(imageData1, 60, 60);
      
      // 绘制棋盘ImageData
      ctx.putImageData(imageData2, 160, 60);
      
      // 添加标签
      ctx.fillStyle = '#666';
      ctx.font = '12px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('空白 ImageData', 100, 160);
      ctx.fillText('80x80 像素', 100, 175);
      
      ctx.fillText('棋盘 ImageData', 200, 160);
      ctx.fillText('80x80 像素', 200, 175);
      
      this.setData({
        result: 'createImageData测试成功',
        resultStr: this.formatResult({
          status: 'createImageData方法测试成功',
          imageData1Size: `${imageData1.width}x${imageData1.height}`,
          imageData2Size: `${imageData2.width}x${imageData2.height}`,
          dataLength: imageData1.data.length,
          note: '创建了空白和棋盘两种效果'
        })
      });
    } catch (error) {
      this.setData({
        result: `createImageData测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // createPath2D - 创建路径对象
  testCreatePath2D() {
    if (!this.data.canvas || !this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      // 清空画布
      ctx.clearRect(0, 0, 300, 300);
      
      // 绘制背景
      ctx.fillStyle = '#fafafa';
      ctx.fillRect(0, 0, 300, 300);
      
      // 绘制标题
      ctx.fillStyle = '#333';
      ctx.font = 'bold 16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Canvas 2D createPath2D 演示', 150, 30);
      
      // 创建第一个路径 - 三角形
      const path1 = new Path2D();
      path1.moveTo(80, 60);
      path1.lineTo(120, 60);
      path1.lineTo(100, 100);
      path1.closePath();
      
      // 创建第二个路径 - 圆形
      const path2 = new Path2D();
      path2.arc(200, 80, 25, 0, 2 * Math.PI);
      
      // 创建第三个路径 - 复杂曲线
      const path3 = new Path2D();
      path3.moveTo(50, 150);
      path3.quadraticCurveTo(100, 120, 150, 150);
      path3.quadraticCurveTo(200, 180, 250, 150);
      
      // 创建第四个路径 - 使用SVG路径字符串
      const path4 = new Path2D('M 80 200 L 120 200 L 120 240 L 80 240 Z M 90 210 L 110 210 L 110 230 L 90 230 Z');
      
      // 绘制路径
      ctx.fillStyle = '#ff6b6b';
      ctx.fill(path1);
      
      ctx.fillStyle = '#4ecdc4';
      ctx.fill(path2);
      
      ctx.strokeStyle = '#45b7d1';
      ctx.lineWidth = 3;
      ctx.stroke(path3);
      
      ctx.fillStyle = '#96ceb4';
      ctx.fill(path4);
      
      // 添加标签
      ctx.fillStyle = '#666';
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('三角形', 100, 115);
      ctx.fillText('圆形', 200, 115);
      ctx.fillText('曲线', 150, 170);
      ctx.fillText('复合路径', 100, 260);
      
      this.setData({
        result: 'createPath2D测试成功',
        resultStr: this.formatResult({
          status: 'createPath2D方法测试成功',
          pathCount: 4,
          shapes: ['三角形', '圆形', '曲线', '复合路径'],
          note: '所有Path2D对象创建成功并正常绘制'
        })
      });
    } catch (error) {
      this.setData({
        result: `createPath2D测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // toDataURL - 转换为数据URL
  testToDataURL() {
    if (!this.data.canvas) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      // 先绘制一些内容用于toDataURL
      ctx.clearRect(0, 0, 300, 300);
      
      // 绘制一个漂亮的渐变背景
      const gradient = ctx.createLinearGradient(0, 0, 300, 300);
      gradient.addColorStop(0, '#667eea');
      gradient.addColorStop(1, '#764ba2');
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 300, 300);
      
      // 绘制标题
      ctx.fillStyle = '#ffffff';
      ctx.font = 'bold 18px Arial';
      ctx.textAlign = 'center';
      ctx.shadowColor = 'rgba(0,0,0,0.3)';
      ctx.shadowBlur = 2;
      ctx.shadowOffsetX = 1;
      ctx.shadowOffsetY = 1;
      ctx.fillText('Canvas 2D toDataURL 演示', 150, 40);
      
      // 清除阴影
      ctx.shadowColor = 'transparent';
      ctx.shadowBlur = 0;
      ctx.shadowOffsetX = 0;
      ctx.shadowOffsetY = 0;
      
      // 绘制一个白色圆形
      ctx.fillStyle = '#ffffff';
      ctx.beginPath();
      ctx.arc(150, 120, 40, 0, 2 * Math.PI);
      ctx.fill();
      
      // 在圆内绘制文字
      ctx.fillStyle = '#667eea';
      ctx.font = '16px Arial';
      ctx.fillText('PNG', 150, 125);
      
      // 绘制一些装饰元素
      ctx.fillStyle = 'rgba(255,255,255,0.8)';
      ctx.fillRect(80, 180, 140, 60);
      
      ctx.fillStyle = '#333';
      ctx.font = '12px Arial';
      ctx.fillText('Canvas 内容已转换', 150, 200);
      ctx.fillText('为 DataURL 格式', 150, 220);
      
      // 获取DataURL
      const dataURL = canvas.toDataURL('image/png');
      const dataSize = Math.round(dataURL.length / 1024 * 100) / 100; // KB
      const isValidDataURL = dataURL.startsWith('data:image/png;base64,');
      
      this.setData({
        result: 'toDataURL测试成功',
        resultStr: this.formatResult({
          status: 'toDataURL方法测试成功',
          format: 'image/png',
          dataSize: `${dataSize}KB`,
          isValid: isValidDataURL,
          urlPrefix: dataURL.substring(0, 30) + '...',
          note: 'Canvas内容已成功转换为DataURL'
        })
      });
      
      console.log('DataURL:', dataURL.substring(0, 100) + '...');
      
    } catch (error) {
      this.setData({
        result: `toDataURL测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // 创建离屏Canvas
  async createOffscreenCanvas() {
    try {
      // 检查基础库版本兼容性
      const systemInfo = wx.getSystemInfoSync();
      const SDKVersion = systemInfo.SDKVersion;
      
      let offscreenCanvas;
      let context;
      let canvasType = '2d';
      
      // 基础库 2.16.1 及以上使用新版API
      if (this.compareVersion(SDKVersion, '2.16.1') >= 0) {
        // 新版API - 支持完整参数
        offscreenCanvas = wx.createOffscreenCanvas({
          type: '2d',           // 指定canvas类型
          width: 300,           // 画布宽度
          height: 150,          // 画布高度
          compInst: this        // 组件实例
        });
        context = offscreenCanvas.getContext('2d');
      } else if (this.compareVersion(SDKVersion, '2.7.0') >= 0) {
        // 旧版API - 只支持webgl类型
        offscreenCanvas = wx.createOffscreenCanvas(300, 150, this);
        context = offscreenCanvas.getContext('webgl');
        canvasType = 'webgl';
        
        this.setData({
          result: '使用旧版API创建离屏Canvas',
          resultStr: this.formatResult({
            status: '旧版API (基础库 2.7.0+)',
            type: 'webgl',
            version: SDKVersion,
            note: '旧版只支持webgl类型'
          })
        });
        return;
      } else {
        throw new Error('基础库版本过低，不支持离屏Canvas');
      }
      
      // 2d类型的绘制操作
      if (canvasType === '2d') {
        // 绘制渐变背景
        const gradient = context.createLinearGradient(0, 0, 300, 0);
        gradient.addColorStop(0, '#667eea');
        gradient.addColorStop(1, '#764ba2');
        context.fillStyle = gradient;
        context.fillRect(0, 0, 300, 150);
        
        // 绘制标题
        context.fillStyle = '#ffffff';
        context.font = 'bold 18px Arial';
        context.textAlign = 'center';
        context.shadowColor = 'rgba(0,0,0,0.3)';
        context.shadowBlur = 2;
        context.fillText('离屏Canvas演示', 150, 40);
        
        // 清除阴影
        context.shadowColor = 'transparent';
        context.shadowBlur = 0;
        
        // 绘制图形
        context.fillStyle = 'rgba(255,255,255,0.8)';
        context.fillRect(50, 60, 200, 60);
        
        context.fillStyle = '#333333';
        context.font = '14px Arial';
        context.fillText('离屏Canvas内容', 150, 85);
        context.fillText(`类型: ${canvasType} | 尺寸: 300x150`, 150, 105);
        
        // 获取图像数据并绘制到主Canvas
        const imgData = context.getImageData(0, 0, 300, 150);
        if (this.data.ctx) {
          this.data.ctx.clearRect(0, 0, 300, 300);
          this.data.ctx.putImageData(imgData, 0, 0);
        }
        
        this.setData({
          result:context
        });
      }
      
    } catch (error) {
      this.setData({
        result: `创建失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  


  canvasToTempFilePath() {
    if (!this.data.canvas) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      wx.canvasToTempFilePath({
        canvas: this.data.canvas,
        success: (res) => {
          this.setData({
            result:res
          });
          
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              wx.showToast({
                title: '已保存到相册',
                icon: 'success'
              });
            },
            fail: (err) => {
              console.log('保存到相册失败:', err);
              wx.showToast({
                title: '请授权访问相册',
                icon: 'none'
              });
            }
          });
        },
        fail: (error) => {
          this.setData({
            result: `导出失败: ${error.errMsg}`,
            resultStr: this.formatResult(error.errMsg, false)
          });
        }
      });
    } catch (error) {
      this.setData({
        result: `导出失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // 绘制像素数据
  canvasPutImageData() {
    if (!this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const ctx = this.data.ctx;
      
      // 创建一个像素数据数组
      const imageData = ctx.createImageData(100, 100);
      const data = imageData.data;
      
      // 生成彩色像素数据 (创建一个渐变效果)
      for (let i = 0; i < data.length; i += 4) {
        const pixelIndex = i / 4;
        const x = pixelIndex % 100;
        const y = Math.floor(pixelIndex / 100);
        
        // 红色通道 - 水平渐变
        data[i] = (x / 100) * 255;
        // 绿色通道 - 垂直渐变
        data[i + 1] = (y / 100) * 255;
        // 蓝色通道 - 固定值
        data[i + 2] = 128;
        // Alpha通道 - 不透明
        data[i + 3] = 255;
      }
      
      // 清空画布
      ctx.clearRect(0, 0, 300, 300);
      
      // 绘制背景
      ctx.fillStyle = '#f0f0f0';
      ctx.fillRect(0, 0, 300, 300);
      
      // 绘制标题
      ctx.fillStyle = '#333';
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('像素数据绘制演示', 150, 30);
      
      // 绘制像素数据
      ctx.putImageData(imageData, 100, 50);
      
      // 添加说明文字
      ctx.fillStyle = '#666';
      ctx.font = '12px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('100x100 像素数据', 150, 170);
      ctx.fillText('红绿渐变效果', 150, 185);
      
      this.setData({
        result: ctx
      });
    } catch (error) {
      this.setData({
        result: `绘制失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // 获取像素数据
  canvasGetImageData() {
    if (!this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const ctx = this.data.ctx;
      
      // 先绘制一些内容用于获取像素数据
      ctx.clearRect(0, 0, 300, 300);
      
      // 绘制背景
      ctx.fillStyle = '#e6f3ff';
      ctx.fillRect(0, 0, 300, 300);
      
      // 绘制一个彩色区域
      const gradient = ctx.createRadialGradient(150, 150, 0, 150, 150, 80);
      gradient.addColorStop(0, '#ff0000');
      gradient.addColorStop(0.5, '#00ff00');
      gradient.addColorStop(1, '#0000ff');
      ctx.fillStyle = gradient;
      ctx.fillRect(70, 70, 160, 160);
      
      // 获取中心区域的像素数据
      const imageData = ctx.getImageData(120, 120, 60, 60);
      
      // 分析像素数据
      let redSum = 0, greenSum = 0, blueSum = 0;
      const pixelCount = imageData.width * imageData.height;
      
      for (let i = 0; i < imageData.data.length; i += 4) {
        redSum += imageData.data[i];
        greenSum += imageData.data[i + 1];
        blueSum += imageData.data[i + 2];
      }
      
      const avgRed = Math.round(redSum / pixelCount);
      const avgGreen = Math.round(greenSum / pixelCount);
      const avgBlue = Math.round(blueSum / pixelCount);
      
      // 显示结果
      ctx.fillStyle = '#333';
      ctx.font = '14px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('获取像素数据演示', 150, 30);
      
      ctx.font = '12px Arial';
      ctx.fillText(`获取区域: 60x60像素`, 150, 260);
      ctx.fillText(`平均RGB: (${avgRed}, ${avgGreen}, ${avgBlue})`, 150, 280);
      
      this.setData({
        result: '像素数据获取成功',
        resultStr: this.formatResult({
          status: '像素数据获取成功',
          size: `${imageData.width}x${imageData.height}`,
          pixelCount: pixelCount,
          averageRGB: `(${avgRed}, ${avgGreen}, ${avgBlue})`,
          dataLength: imageData.data.length
        })
      });
    } catch (error) {
      this.setData({
        result: `获取失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // Path2D.addPath - 添加路径到当前路径
  testPath2DAddPath() {
    if (!this.data.canvas || !this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#f0f0f0';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = '#333';
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Path2D.addPath 演示', 150, 30);
      
      // 创建第一个路径 - 三角形
      const path1 = new Path2D();
      path1.moveTo(50, 80);
      path1.lineTo(100, 80);
      path1.lineTo(75, 120);
      path1.closePath();
      
      // 创建第二个路径 - 圆形
      const path2 = new Path2D();
      path2.arc(200, 100, 30, 0, 2 * Math.PI);
      
      // 创建主路径并添加其他路径
      const mainPath = new Path2D();
      mainPath.rect(20, 150, 60, 40); // 添加矩形
      mainPath.addPath(path1); // 添加三角形路径
      mainPath.addPath(path2); // 添加圆形路径
      
      // 绘制主路径
      ctx.fillStyle = '#ff6b6b';
      ctx.fill(mainPath);
      
      // 绘制描边
      ctx.strokeStyle = '#333';
      ctx.lineWidth = 2;
      ctx.stroke(mainPath);
      
      ctx.fillStyle = '#666';
      ctx.font = '12px Arial';
      ctx.textAlign = 'left';
      ctx.fillText('主路径包含: 矩形 + 三角形 + 圆形', 20, 220);
      
      
      this.setData({
        result: 'Path2D.addPath测试成功',
        resultStr: this.formatResult({
          status: 'Path2D.addPath方法测试成功',
          paths: ['矩形', '三角形', '圆形'],
          note: '成功将多个路径合并到主路径中'
        })
      });
    } catch (error) {
      this.setData({
        result: `Path2D.addPath测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // Path2D.arc - 绘制圆弧
  testPath2DArc() {
    if (!this.data.canvas || !this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#f8f8f8';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = '#333';
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Path2D.arc 演示', 150, 30);
      
      // 创建路径并添加多个圆弧
      const path = new Path2D();
      
      // 完整圆
      path.arc(80, 80, 30, 0, 2 * Math.PI);
      
      // 半圆
      path.arc(180, 80, 30, 0, Math.PI);
      
      // 四分之一圆
      path.arc(80, 180, 30, 0, Math.PI / 2);
      
      // 自定义角度圆弧
      path.arc(180, 180, 30, Math.PI / 4, 3 * Math.PI / 2);
      
      // 绘制路径
      ctx.fillStyle = '#e74c3c';
      ctx.fill(path);
      
      ctx.strokeStyle = '#333';
      ctx.lineWidth = 2;
      ctx.stroke(path);
      
      ctx.fillStyle = '#666';
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('完整圆', 80, 125);
      ctx.fillText('半圆', 180, 125);
      ctx.fillText('1/4圆', 80, 225);
      ctx.fillText('自定义弧', 180, 225);
      
      
      this.setData({
        result: 'Path2D.arc测试成功',
        resultStr: this.formatResult({
          status: 'Path2D.arc方法测试成功',
          arcs: ['完整圆', '半圆', '四分之一圆', '自定义角度弧'],
          note: '成功绘制多种类型的圆弧'
        })
      });
    } catch (error) {
      this.setData({
        result: `Path2D.arc测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // Path2D.arcTo - 绘制切线弧
  testPath2DArcTo() {
    if (!this.data.canvas || !this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#f0f0f0';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = '#333';
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Path2D.arcTo 演示', 150, 30);
      
      // 创建路径并绘制圆角矩形
      const path = new Path2D();
      
      // 圆角矩形1
      path.moveTo(50, 60);
      path.lineTo(150, 60);
      path.arcTo(160, 60, 160, 70, 10);
      path.lineTo(160, 100);
      path.arcTo(160, 110, 150, 110, 10);
      path.lineTo(50, 110);
      path.arcTo(40, 110, 40, 100, 10);
      path.lineTo(40, 70);
      path.arcTo(40, 60, 50, 60, 10);
      path.closePath();
      
      // 圆角矩形2
      path.moveTo(50, 150);
      path.lineTo(120, 150);
      path.arcTo(130, 150, 130, 160, 15);
      path.lineTo(130, 190);
      path.arcTo(130, 200, 120, 200, 15);
      path.lineTo(50, 200);
      path.arcTo(40, 200, 40, 190, 15);
      path.lineTo(40, 160);
      path.arcTo(40, 150, 50, 150, 15);
      path.closePath();
      
      // 绘制路径
      ctx.fillStyle = '#27ae60';
      ctx.fill(path);
      
      ctx.strokeStyle = '#333';
      ctx.lineWidth = 2;
      ctx.stroke(path);
      
      ctx.fillStyle = '#666';
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('小圆角矩形', 100, 135);
      ctx.fillText('大圆角矩形', 85, 225);
      
      
      this.setData({
        result: 'Path2D.arcTo测试成功',
        resultStr: this.formatResult({
          status: 'Path2D.arcTo方法测试成功',
          shapes: ['小圆角矩形', '大圆角矩形'],
          note: '成功绘制圆角矩形，展示切线弧效果'
        })
      });
    } catch (error) {
      this.setData({
        result: `Path2D.arcTo测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // Path2D.bezierCurveTo - 绘制贝塞尔曲线
  testPath2DBezierCurveTo() {
    if (!this.data.canvas || !this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#f8f8f8';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = '#333';
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Path2D.bezierCurveTo 演示', 150, 30);
      
      // 创建路径并绘制贝塞尔曲线
      const path = new Path2D();
      
      // 第一条贝塞尔曲线
      path.moveTo(50, 80);
      path.bezierCurveTo(100, 40, 150, 120, 200, 80);
      
      // 第二条贝塞尔曲线
      path.moveTo(50, 150);
      path.bezierCurveTo(80, 120, 120, 180, 150, 150);
      path.bezierCurveTo(180, 120, 220, 180, 250, 150);
      
      // 绘制路径
      ctx.strokeStyle = '#e74c3c';
      ctx.lineWidth = 3;
      ctx.stroke(path);
      
      // 绘制控制点
      ctx.fillStyle = '#3498db';
      ctx.beginPath();
      ctx.arc(100, 40, 3, 0, 2 * Math.PI);
      ctx.arc(150, 120, 3, 0, 2 * Math.PI);
      ctx.arc(80, 120, 3, 0, 2 * Math.PI);
      ctx.arc(120, 180, 3, 0, 2 * Math.PI);
      ctx.arc(180, 120, 3, 0, 2 * Math.PI);
      ctx.arc(220, 180, 3, 0, 2 * Math.PI);
      ctx.fill();
      
      ctx.fillStyle = '#666';
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('三次贝塞尔曲线', 125, 100);
      ctx.fillText('复合贝塞尔曲线', 150, 200);
      
      
      this.setData({
        result: 'Path2D.bezierCurveTo测试成功',
        resultStr: this.formatResult({
          status: 'Path2D.bezierCurveTo方法测试成功',
          curves: ['三次贝塞尔曲线', '复合贝塞尔曲线'],
          note: '成功绘制贝塞尔曲线，蓝色点为控制点'
        })
      });
    } catch (error) {
      this.setData({
        result: `Path2D.bezierCurveTo测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // Path2D.closePath - 闭合路径
  testPath2DClosePath() {
    if (!this.data.canvas || !this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#f0f0f0';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = '#333';
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Path2D.closePath 演示', 150, 30);
      
      // 创建闭合路径
      const closedPath = new Path2D();
      closedPath.moveTo(50, 80);
      closedPath.lineTo(100, 60);
      closedPath.lineTo(150, 80);
      closedPath.lineTo(130, 120);
      closedPath.lineTo(70, 120);
      closedPath.closePath(); // 闭合路径
      
      // 创建未闭合路径
      const openPath = new Path2D();
      openPath.moveTo(50, 180);
      openPath.lineTo(100, 160);
      openPath.lineTo(150, 180);
      openPath.lineTo(130, 220);
      openPath.lineTo(70, 220);
      // 注意：这里没有调用closePath()
      
      // 绘制闭合路径
      ctx.fillStyle = '#27ae60';
      ctx.fill(closedPath);
      ctx.strokeStyle = '#333';
      ctx.lineWidth = 2;
      ctx.stroke(closedPath);
      
      // 绘制未闭合路径
      ctx.strokeStyle = '#e74c3c';
      ctx.lineWidth = 2;
      ctx.stroke(openPath);
      
      ctx.fillStyle = '#666';
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('闭合路径 (填充+描边)', 100, 140);
      ctx.fillText('未闭合路径 (仅描边)', 100, 240);
      
      
      this.setData({
        result: 'Path2D.closePath测试成功',
        resultStr: this.formatResult({
          status: 'Path2D.closePath方法测试成功',
          comparison: ['闭合路径', '未闭合路径'],
          note: '闭合路径可以填充，未闭合路径只能描边'
        })
      });
    } catch (error) {
      this.setData({
        result: `Path2D.closePath测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // Path2D.ellipse - 绘制椭圆
  testPath2DEllipse() {
    if (!this.data.canvas || !this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#f8f8f8';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = '#333';
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Path2D.ellipse 演示', 150, 30);
      
      // 创建路径并绘制椭圆
      const path = new Path2D();
      
      // 水平椭圆
      path.ellipse(80, 80, 40, 20, 0, 0, 2 * Math.PI);
      
      // 垂直椭圆
      path.ellipse(200, 80, 20, 40, 0, 0, 2 * Math.PI);
      
      // 旋转椭圆
      path.ellipse(80, 180, 30, 15, Math.PI / 4, 0, 2 * Math.PI);
      
      // 椭圆弧
      path.ellipse(200, 180, 35, 25, 0, Math.PI / 2, Math.PI);
      
      // 绘制路径
      ctx.fillStyle = '#9b59b6';
      ctx.fill(path);
      
      ctx.strokeStyle = '#333';
      ctx.lineWidth = 2;
      ctx.stroke(path);
      
      ctx.fillStyle = '#666';
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('水平椭圆', 80, 110);
      ctx.fillText('垂直椭圆', 200, 110);
      ctx.fillText('旋转椭圆', 80, 210);
      ctx.fillText('椭圆弧', 200, 210);
      
      
      this.setData({
        result: 'Path2D.ellipse测试成功',
        resultStr: this.formatResult({
          status: 'Path2D.ellipse方法测试成功',
          ellipses: ['水平椭圆', '垂直椭圆', '旋转椭圆', '椭圆弧'],
          note: '成功绘制多种类型的椭圆'
        })
      });
    } catch (error) {
      this.setData({
        result: `Path2D.ellipse测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // Path2D.lineTo - 绘制直线
  testPath2DLineTo() {
    if (!this.data.canvas || !this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#f0f0f0';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = '#333';
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Path2D.lineTo 演示', 150, 30);
      
      // 创建路径并绘制线条
      const path = new Path2D();
      
      // 绘制星形
      path.moveTo(100, 60);
      path.lineTo(120, 100);
      path.lineTo(160, 100);
      path.lineTo(130, 130);
      path.lineTo(140, 170);
      path.lineTo(100, 150);
      path.lineTo(60, 170);
      path.lineTo(70, 130);
      path.lineTo(40, 100);
      path.lineTo(80, 100);
      path.closePath();
      
      // 绘制简单线条
      path.moveTo(50, 200);
      path.lineTo(100, 180);
      path.lineTo(150, 200);
      path.lineTo(200, 180);
      path.lineTo(250, 200);
      
      // 绘制路径
      ctx.fillStyle = '#f39c12';
      ctx.fill(path);
      
      ctx.strokeStyle = '#333';
      ctx.lineWidth = 2;
      ctx.stroke(path);
      
      ctx.fillStyle = '#666';
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('星形图案', 100, 190);
      ctx.fillText('折线图案', 150, 220);
      
    
      this.setData({
        result: 'Path2D.lineTo测试成功',
        resultStr: this.formatResult({
          status: 'Path2D.lineTo方法测试成功',
          patterns: ['星形图案', '折线图案'],
          note: '成功绘制复杂的线条图案'
        })
      });
    } catch (error) {
      this.setData({
        result: `Path2D.lineTo测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // Path2D.moveTo - 移动画笔
  testPath2DMoveTo() {
    if (!this.data.canvas || !this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#f8f8f8';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = '#333';
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Path2D.moveTo 演示', 150, 30);
      
      // 创建路径并演示moveTo
      const path = new Path2D();
      
      // 绘制多个独立的图形
      // 第一个三角形
      path.moveTo(50, 80);
      path.lineTo(80, 80);
      path.lineTo(65, 110);
      path.closePath();
      
      // 第二个三角形（移动到新位置）
      path.moveTo(120, 80);
      path.lineTo(150, 80);
      path.lineTo(135, 110);
      path.closePath();
      
      // 第三个三角形
      path.moveTo(190, 80);
      path.lineTo(220, 80);
      path.lineTo(205, 110);
      path.closePath();
      
      // 绘制路径
      ctx.fillStyle = '#e74c3c';
      ctx.fill(path);
      
      ctx.strokeStyle = '#333';
      ctx.lineWidth = 2;
      ctx.stroke(path);
      
      // 标记moveTo的起点
      ctx.fillStyle = '#3498db';
      ctx.beginPath();
      ctx.arc(50, 80, 3, 0, 2 * Math.PI);
      ctx.arc(120, 80, 3, 0, 2 * Math.PI);
      ctx.arc(190, 80, 3, 0, 2 * Math.PI);
      ctx.fill();
      
      ctx.fillStyle = '#666';
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('moveTo起点', 65, 130);
      ctx.fillText('moveTo起点', 135, 130);
      ctx.fillText('moveTo起点', 205, 130);
      
      
      this.setData({
        result: 'Path2D.moveTo测试成功',
        resultStr: this.formatResult({
          status: 'Path2D.moveTo方法测试成功',
          shapes: ['三个独立三角形'],
          note: 'moveTo用于移动画笔到新位置开始绘制'
        })
      });
    } catch (error) {
      this.setData({
        result: `Path2D.moveTo测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // Path2D.quadraticCurveTo - 绘制二次贝塞尔曲线
  testPath2DQuadraticCurveTo() {
    if (!this.data.canvas || !this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#f0f0f0';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = '#333';
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Path2D.quadraticCurveTo 演示', 150, 30);
      
      // 创建路径并绘制二次贝塞尔曲线
      const path = new Path2D();
      
      // 第一条二次贝塞尔曲线
      path.moveTo(50, 100);
      path.quadraticCurveTo(100, 50, 150, 100);
      
      // 第二条二次贝塞尔曲线
      path.moveTo(50, 150);
      path.quadraticCurveTo(100, 200, 150, 150);
      
      // 复合曲线
      path.moveTo(50, 200);
      path.quadraticCurveTo(100, 180, 150, 200);
      path.quadraticCurveTo(200, 220, 250, 200);
      
      // 绘制路径
      ctx.strokeStyle = '#e74c3c';
      ctx.lineWidth = 3;
      ctx.stroke(path);
      
      // 绘制控制点
      ctx.fillStyle = '#3498db';
      ctx.beginPath();
      ctx.arc(100, 50, 3, 0, 2 * Math.PI);
      ctx.arc(100, 200, 3, 0, 2 * Math.PI);
      ctx.arc(100, 180, 3, 0, 2 * Math.PI);
      ctx.arc(200, 220, 3, 0, 2 * Math.PI);
      ctx.fill();
      
      ctx.fillStyle = '#666';
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('向上弯曲', 100, 120);
      ctx.fillText('向下弯曲', 100, 170);
      ctx.fillText('复合曲线', 150, 240);
      
      
      this.setData({
        result: 'Path2D.quadraticCurveTo测试成功',
        resultStr: this.formatResult({
          status: 'Path2D.quadraticCurveTo方法测试成功',
          curves: ['向上弯曲', '向下弯曲', '复合曲线'],
          note: '成功绘制二次贝塞尔曲线，蓝色点为控制点'
        })
      });
    } catch (error) {
      this.setData({
        result: `Path2D.quadraticCurveTo测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // Path2D.rect - 绘制矩形
  testPath2DRect() {
    if (!this.data.canvas || !this.data.ctx) {
      this.setData({ 
        result: 'Canvas未初始化',
        resultStr: this.formatResult('Canvas未初始化', false)
      });
      return;
    }

    try {
      const canvas = this.data.canvas;
      const ctx = this.data.ctx;
      
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#f8f8f8';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = '#333';
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Path2D.rect 演示', 150, 30);
      
      // 创建路径并绘制矩形  
      const path = new Path2D();
      
      // 添加多个矩形
      path.rect(50, 60, 60, 40);   // 小矩形
      path.rect(150, 60, 80, 50);  // 大矩形
      path.rect(50, 150, 40, 60);  // 高矩形
      path.rect(150, 150, 100, 30); // 宽矩形
      
      // 绘制路径
      ctx.fillStyle = '#2ecc71';
      ctx.fill(path);
      
      ctx.strokeStyle = '#333';
      ctx.lineWidth = 2;
      ctx.stroke(path);
      
      ctx.fillStyle = '#666';
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('小矩形', 80, 85);
      ctx.fillText('大矩形', 190, 90);
      ctx.fillText('高矩形', 70, 185);
      ctx.fillText('宽矩形', 200, 175);

      
      this.setData({
        result: 'Path2D.rect测试成功',
        resultStr: this.formatResult({
          status: 'Path2D.rect方法测试成功',
          rectangles: ['小矩形', '大矩形', '高矩形', '宽矩形'],
          note: '成功绘制多种尺寸的矩形'
        })
      });
    } catch (error) {
      this.setData({
        result: `Path2D.rect测试失败: ${error.message}`,
        resultStr: this.formatResult(error.message, false)
      });
    }
  },

  // API处理函数实现
  createOffscreenCanvasFunc: function() {
    this.createOffscreenCanvas();
  },

  canvasToTempFilePathFunc: function() {
    this.canvasToTempFilePath();
  },

  canvasPutImageDataFunc: function() {
    this.canvasPutImageData();
  },

  canvasGetImageDataFunc: function() {
    this.canvasGetImageData();
  },

  testGetContextFunc: function() {
    this.testGetContext();
  },

  testRequestAnimationFrameFunc: function() {
    this.testRequestAnimationFrame();
  },

  testCancelAnimationFrameFunc: function() {
    this.testCancelAnimationFrame();
  },

  testCreateImageFunc: function() {
    this.testCreateImage();
  },

  testCreateImageDataFunc: function() {
    this.testCreateImageData();
  },

  testCreatePath2DFunc: function() {
    this.testCreatePath2D();
  },

  testToDataURLFunc: function() {
    this.testToDataURL();
  },

  testPath2DAddPathFunc: function() {
    this.testPath2DAddPath();
  },

  testPath2DArcFunc: function() {
    this.testPath2DArc();
  },

  testPath2DArcToFunc: function() {
    this.testPath2DArcTo();
  },

  testPath2DBezierCurveToFunc: function() {
    this.testPath2DBezierCurveTo();
  },

  testPath2DClosePathFunc: function() {
    this.testPath2DClosePath();
  },

  testPath2DEllipseFunc: function() {
    this.testPath2DEllipse();
  },

  testPath2DLineToFunc: function() {
    this.testPath2DLineTo();
  },

  testPath2DMoveToFunc: function() {
    this.testPath2DMoveTo();
  },

  testPath2DQuadraticCurveToFunc: function() {
    this.testPath2DQuadraticCurveTo();
  },

  testPath2DRectFunc: function() {
    this.testPath2DRect();
  },

  forceInitCanvasFunc: function() {
    this.forceInitCanvas();
  },

  testSimpleCanvasFunc: function() {
    this.testSimpleCanvas();
  },

  clearCanvasFunc: function() {
    this.clearCanvas();
  }
});
